﻿<!DOCTYPE html>
<html>
	<head>
		<title>Dragable demo with freewall</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="Freewall demo for draggable" />
		<meta name="viewport" content="initial-scale=0.5; maximum-scale=0.5; user-scalable=0;"/>
		<meta name="keywords" content="javascript, dynamic, grid, layout, jquery plugin, flex layouts"/>
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../freewall.js"></script>
		<style type="text/css">
			.free-wall {
				margin: 15px;
			}
			.cell {
				cursor: move;
			}
			.cell .cover {
				padding: 15px;
			}
			.handle {
				border: 1px dotted orange;
				padding: 4px
			}
		</style>
	</head>
	<body>
		<div class='header'>
			<div class="clearfix">
				<div class="float-left">
						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
						<div class='target'>Creating dynamic grid layouts.</div>
				</div>
			</div>
		</div>
		<div class="layout">
			<div id="freewall" class="free-wall">
				<div class='cell' style='width:300px; height: 300px; background-color:rgb(142, 68, 173)' data-handle=".handle">
					<div class='cover'>
						<div class='handle'>Drag item handle</div>
					</div>
				</div>
				<div class='cell' style='width:150px; height: 300px; background-color:rgb(142, 68, 173)' data-handle=".handle">
					<div class='cover'>
						<div class='handle'>Drag item handle</div>
					</div>
				</div>
				<div class='cell' style='width:450px; height: 150px; background-color:rgb(142, 68, 173)' data-handle=".handle">
					<div class='cover'>
						<div class='handle'>Drag item handle</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">

			var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-color: {color}'><div class='cover'>Demo draggable</div></div>";
			var colour = [
				"rgb(243, 156, 18)",
				"rgb(211, 84, 0)",
				"rgb(0, 106, 63)",
				"rgb(41, 128, 185)",
				"rgb(192, 57, 43)",
				"rgb(135, 0, 0)",
				"rgb(39, 174, 96)"
			];

			var w = 1, h = 1,  color = '', limitItem = 28;
			for (var i = 0; i < limitItem; ++i) {
				h = 1 + 3 * Math.random() << 0;
				w = 1 + 3 * Math.random() << 0;
				color = colour[colour.length * Math.random() << 0];
				html = temp.replace(/\{height\}/g, h*150).replace(/\{width\}/g, w*150).replace("{color}", color);
				$("#freewall").append(html);
			}


			var wall = new Freewall("#freewall");
			wall.reset({
				draggable: true,
				selector: '.cell',
				animate: true,
				cellW: 150,
				cellH: 150,
				onResize: function() {
					wall.refresh();
				},
				onBlockMove: function() {
					console.log(this);
				}
			});
			wall.fitWidth();
			// for scroll bar appear;
			$(window).trigger("resize");
		</script>
	</body>
</html>
